<template>
  <Modal :width="1200" :loading="true" :scrollable="true" title="子任务报表" v-model="isShowReportModal">
    <div class="loading"  v-if="loading"  >
      <Spin class="img">
        <Icon type="ios-loading" class="demo-spin-icon-load"/>
        <div>正在拼命加载中...</div>
      </Spin>
  </div>
  <div>
    <Form :label-width="120">
      <Row>
        <Col span="19">
          <FormItem label="文件编号:" class="sub-task-item">
            <span style="font-size:18px">{{ subTaskVo.taskCode ? subTaskVo.taskCode : '' }}</span>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="任务状态:" class="sub-task-item">
            <span style="font-family:'微软雅黑', sans-serif;font-weight:400;color:#FF9900;">● </span>
            <span style="font-size:18px">{{ subTaskVo.statusText ? subTaskVo.statusText : '' }}</span>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem label="电芯编号:">{{ subTaskVo.electricCoreCode ? subTaskVo.electricCoreCode : '' }}</FormItem>
        </Col>
        <Col span="8">
          <FormItem label="任务编号:">{{ mainTaskVo.taskCode ? mainTaskVo.taskCode : '' }}</FormItem>
        </Col>
        <Col span="8">
          <FormItem label="任务名称:">{{ mainTaskVo.taskName ? mainTaskVo.taskName : '' }}</FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <FormItem label="电芯型号:">{{ subTaskVo.electricCoreTypeName ? subTaskVo.electricCoreTypeName : '' }}</FormItem>
        </Col>
        <Col span="8">
          <FormItem label="计划时间:">{{ mainTaskVo.planStartTime }} - {{ mainTaskVo.planEndTime }}</FormItem>
        </Col>
        <Col span="8">
          <FormItem label="完成时间:">{{ subTaskVo.completionTime ? subTaskVo.completionTime : '' }}</FormItem>
        </Col>
      </Row>
      <Divider/>
      <Row>
        <Timeline>
          <TimelineItem v-for="(subTaskNodeInstVo,index) in subTaskNodeInstVos"
                        :key="index">
            <Row>
              <Col span="1">
                <div class="steps-head">
                  <div class="steps-head-inner" slot="dot"><span>{{ subTaskNodeInstVo.sortNo }}</span></div>
                </div>
              </Col>
              <Col span="8">
                <span class="sub-task-item">{{ subTaskNodeInstVo.taskNodeName ? subTaskNodeInstVo.taskNodeName : '' }}</span>
              </Col>
            </Row>
            <div v-if="subTaskNodeInstVo.sortNo===1||subTaskNodeInstVo.taskNodeName==='电芯信息'">
              <Row>
              <Col span="8">
                <FormItem label="电芯型号:">
                  <span>{{ subTaskVo.electricCoreTypeName ? subTaskVo.electricCoreTypeName : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="电芯编号:">
                  <span>{{ subTaskNodeInstVo.electricCoreCode ? subTaskNodeInstVo.electricCoreCode : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="电芯类型:">
                  <span>{{ subTaskNodeInstVo.cellTypeCode ? subTaskNodeInstVo.cellTypeCode : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="缺陷类型:">
                   <span>{{ subTaskNodeInstVo.defectTypeNames ? subTaskNodeInstVo.defectTypeNames : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="生产工厂:">
                   <span>{{ subTaskNodeInstVo.factoryName ? subTaskNodeInstVo.factoryName : '' }}</span>
                </FormItem>
              </Col>
            </Row>
            </div>
            <div v-if="subTaskNodeInstVo.sortNo!=1&&subTaskNodeInstVo.taskNodeName!='电芯信息'">
              <Row v-for="(nodeInstProcessVO,index) in subTaskNodeInstVo.nodeInstProcessVOS"
                        :key="index">
              <Col span="8" v-if="!throw_step.includes(subTaskNodeInstVo.sortNo)">
                <FormItem :label="nodeInstProcessVO.name?nodeInstProcessVO.name+':':''" :style="nodeInstProcessVO.name.length>4?label_margin:''">
                  <span v-if="nodeInstProcessVO.type!=1">{{ nodeInstProcessVO.selectValue ? nodeInstProcessVO.selectValue : '' }}</span>
                  <span v-if="nodeInstProcessVO.type==1">{{ nodeInstProcessVO.configValue ? nodeInstProcessVO.configValue : '' }}{{ nodeInstProcessVO.unit ? nodeInstProcessVO.unit : '' }}</span>
                </FormItem>
              </Col>
              <Col span="14">
                <FormItem label="描述:" prop="configValue" v-if="throw_step.includes(subTaskNodeInstVo.sortNo)">
                  <Input :autosize="{maxRows:8,minRows: 8}" :value="nodeInstProcessVO.configValue"
                    type="textarea" class="relation"  maxlength="200" :data-attr="nodeInstProcessVO.id"></Input>
                </FormItem>
              </Col>
              <Col span="8" v-if="nodeInstProcessVO.isOther===1">
                <FormItem label="其他:">
                  <span>{{ nodeInstProcessVO.otherValue ? nodeInstProcessVO.otherValue : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8" v-if="nodeInstProcessVO.isThrowDesc===1">
                <FormItem label="缺陷类型:">
                  <span>{{ nodeInstProcessVO.defectNames ? nodeInstProcessVO.defectNames : '' }}</span>
                </FormItem>
              </Col>
              <Col span="8" v-if="nodeInstProcessVO.isThrowDesc===1">
                <FormItem label="异常描述:">
                  <span>{{ nodeInstProcessVO.descr ? nodeInstProcessVO.descr : '' }}</span>
                </FormItem>
              </Col>
              <Col span="24" v-if="nodeInstProcessVO.hasImage===1">
                <FormItem label="照片:">
                  <viewer :images="nodeInstProcessVO.taskNodeFileList">
                    <i-col span="2" v-for="(taskNodeFile,index) in nodeInstProcessVO.taskNodeFileList" :key="index" class="detailed">
                      <div>
                        <img :src="taskNodeFile.url" alt="" style="float: left;width:100%"/>
                      </div>
                    </i-col>
                  </viewer>
                </FormItem>
              </Col>
            </Row>
            </div>
          </TimelineItem>
        </Timeline>
      </Row>
    </Form>
    </div>
      <div slot="footer" style="text-align:center">
        <Button :loading="isShowLoading" @click="submitFormData" class="newBtn" type="primary" v-privilege="'update-node-desc'">修改</Button>
      </div>
  </Modal>
</template>
<script>
import {subTaskApi} from '@/api/sub-task';
import { taskDefectTypeApi } from '@/api/task-defect-type';
import $ from 'jquery'
export default {
  name: 'SubTaskReport',
  components: {},
  props: {},
  data() {
    return {
      isShowReportModal: false,
      hiddenId:false,
      subTaskId: '',
      mainTaskVo: {
        taskCode: '',
        taskName: '',
        planStartTime: '',
        planEndTime: ''
      },
      label_margin:{
        marginLeft:'20px'
      },
      isShowLoading:false,
      defectTypeList:[],
      throw_step:[7,8],
      loading:false,
      subTaskVo: {
        taskCode: '',
        taskName: '',
        subTaskCode: '',
        electricCoreCode: '',
        electricCoreType: '',
        createByName: '',
        completionTime: '',
        status: '',
        statusDesc: '',
      },
      subTaskNodeInstVos: []
    }
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
  },
  mounted() {
    this.queryDefectType()
  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  },
  methods: {
    async getSubTaskNodeAllInst() {
      try {
        this.loading = true;
        let result = await subTaskApi.getSubTaskNodeAllInst(this.subTaskId);
        this.subTaskVo = {...result.data.subTaskVo};
        this.subTaskNodeInstVos = result.data.subTaskNodeInstExtVOS
        if (this.subTaskNodeInstVos) {
          this.subTaskNodeInstVos.forEach(item => {
            if (item.nodeInstProcessVOS) {
              item.nodeInstProcessVOS.forEach(x => {
                if (x.defectTypeList) {
                  x.defectNames = x.defectTypeList.map(o => o.defectName).join('、')
                }
              })
            }
          })
        }
        this.mainTaskVo = {...result.data.mainTaskVo};
      } catch (e) {
        console.error(e);
      }finally{
        this.loading = false;
      }
    },
    queryDefectType(){
      taskDefectTypeApi.getTaskDefectType()
        .then(res => {
          this.defectTypeList = res.data;
        })
    },
    showModal(id) {
      this.isShowReportModal = true;
      this.subTaskId = id;
      this.getSubTaskNodeAllInst();
    },
    submitFormData(){
      let relations = []
      $('.relation').each(function(){
        let textarea = $(this).find("textarea").eq(0);
          relations.push({
            id:$(this).attr("data-attr"),
            configValue:textarea.val()
          })
      })
      this.batchUpdateRelation(relations);
    },
    /**
     * 批量更新
     */
    async batchUpdateRelation(relations){
      try {
        this.isShowLoading = true;
        let result = await subTaskApi.batchUpdateNodeInstProcessRelation(relations);
        this.isShowAddOrUpdateUserModal = false;
        this.$Message.success('修改描述成功');
        this.$emit('updateSuccess');
      } catch (e) {
        console.error(e);
      } finally {
        this.isShowLoading = false;
        this.getSubTaskNodeAllInst();
      }
    }
  }
  //获取所有详情

};
</script>
<style lang="less" scoped>
.sub-task-item /deep/ .ivu-form-item-label {
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.steps-head {
  padding-left: 10px;
}

/deep/ .ivu-timeline-item-tail {
  left: 47px;
  margin-top: 23px;
}

/deep/ .ivu-timeline-item-head {
  display: none;
}

.steps-head-inner {
  display: block;
  width: 26px;
  height: 26px;
  line-height: 24px;
  margin-right: 8px;
  text-align: center;
  border: 1px solid #2d8cf0;
  border-radius: 50%;
  font-size: 14px;
  transition: background-color .2s ease-in-out;

  span {
    color: #2d8cf0;
  }
}

.label-text {
  margin-left: 10px;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0,0%,100%,.8);
  z-index: 999;
}
.loading .img {
  display: block;
  width: 200px;
  height: 75%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 14px;
}
/*加载中icon样式*/
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.file-text{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #ffff;
    background-color:#D3D3D3;
}
.detailed{
  margin: 5px 0 0 5px;
}
</style>
